<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./css/header.css" />
    <script src="./js/jquery.js"></script>
    <script src="./js/bootstrap.js"></script>
    <title>Document</title>
    <style>
      #header {
        margin-bottom: 0;
      }
      #mainer {
        min-height: calc(100vh - 170px);
      }
    </style>
  </head>
  <body>
    <div id="bg">
      <div id="header"></div>
      <div id="mainer" class="container">
        <h3 class="page-header">联系我们</h3>
        <div id="contact" class="row"></div>
        <h3 class="page-header">在线留言</h3>
        <div>
          <form id="form" class="form-horizontal">
            <div class="form-group">
              <label for="inputEmail3" class="col-sm-2 control-label"
                >姓名：</label
              >
              <div class="col-sm-10">
                <input
                  name="name"
                  type="text"
                  class="form-control"
                  placeholder="请输入姓名"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label"
                >电话：</label
              >
              <div class="col-sm-10">
                <input
                  name="phone"
                  type="tel"
                  class="form-control"
                  placeholder="请输入联系电话"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label"
                >邮箱：</label
              >
              <div class="col-sm-10">
                <input
                  name="email"
                  type="email"
                  class="form-control"
                  placeholder="请输入常用邮箱"
                />
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-2 control-label"
                >留言：</label
              >
              <div class="col-sm-10">
                <textarea
                  name="content"
                  placeholder="请输入留言"
                  class="form-control"
                  rows="8"
                ></textarea>
              </div>
            </div>
            <div style="text-align: center; padding-bottom: 15px">
              <button
                id="submitBtn"
                style="width: 120px"
                class="btn btn-primary btn-lg"
              >
                提交
              </button>
            </div>
          </form>
        </div>
      </div>
      <!--模态框-->
      <div class="modal fade" id="mymodal">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <span class="close" data-dismiss="modal">&times;</span>
              <h4>提示</h4>
            </div>
            <div class="modal-body">
              提交成功
            </div>
            <div class="modal-footer">
              <button class="btn btn-primary" data-dismiss="modal">
                cancel
              </button>
            </div>
          </div>
        </div>
      </div>
      <div class="modal fade" id="mymodal2">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">
              <span class="close" data-dismiss="modal">&times;</span>
              <h4>提示</h4>
            </div>
            <div class="modal-body">
              提交失败
            </div>
            <div class="modal-footer">
              <button class="btn btn-danger" data-dismiss="modal">
                cancel
              </button>
            </div>
          </div>
        </div>
      </div>
      <div id="footer"></div>
    </div>
    <script>
      $(function () {
        $("#header").load("./header.html");
        $("#footer").load("./footer.html");
        $.ajax({
          type: "get",
          url: "/contact",
          success: (res) => {
            $("#contact").html(`
            <div class="col-md-6">
            <ul class="list-group">
              <li class="list-group-item">地址：${res[0].address}</li>
              <li class="list-group-item">电话：${res[0].telPhone}</li>
              <li class="list-group-item">邮箱：${res[0].email}</li>
              <li class="list-group-item">传真：${res[0].fax}</li>
            </ul>
          </div>
          <div class="col-md-6">
            <img style="width:100%" src="${res[0].img}">
          </div>
            `);
          },
          error: (xhr, status, error) => {
            console.log("出错了", error);
          },
        });
        $("#submitBtn").click(function (e) {
          e.preventDefault();
          $.ajax({
            type: "post",
            url: "/feedback/add",
            data: $("#form").serialize(),
            success: (res) => {
             $("#mymodal").modal('show')
              $("#form")[0].reset();
            },
            error: (xhr, status, error) => {
              console.log("出错了", error);
              $("#mymodal2").modal('show')
            },
          });
        });
     
      });
    </script>
  </body>
</html>
